<template>
	<view class="container">
		<view>
			<view class="vip-card-box" style="background-image: url(/static/images/card_bg.png);background-size: 100% 100%;">
					<view class="text-white text-xxlx text-center padding-top-lg margin-top-lg">
						<view class="action">账户余额</view>
					</view>
					<view class="text-white text-lg text-center padding-top-sm">
						<text class="text-price"></text>
						<text class="text-xxlx">{{ userinfo.money }}</text>
					</view>
					<view class="dl-container">
					<view class="dt-item">
						<text class="dt-title">积分余额</text>
						<text class="dt-num">{{ userinfo.jifen }}</text>
					</view>
					<view class="dt-item" @click="toUrl('/pages/wallet/redbag')">
						<text class="dt-title">红包余额</text>
						<text class="dt-num">{{ userinfo.redbag }}</text>
					</view>
					</view>											
			</view>
		</view>
		
		
		<view class="cu-card dynamic">
			<view class="bg-white shadow-warp" style="margin: 20rpx 0;">
				<view class="bg-white">
					<!-- 添加四个框架 -->
					<view class="cu-list grid col-4">
						<view class="cu-item arrow">
							<view class="content">
								<text>今日收益</text>
								<text class="dt-price" >{{userinfo.todayincome}}</text> 
							</view>
						</view>
						<view class="cu-item arrow">
							<view class="content">
								<text>昨日收益</text>
								<text class="dt-price" >{{userinfo.yesterdayincome}}</text> 
							</view>
						</view>
						<view class="cu-item arrow">
							<view class="content">
								<text>总收益</text>
								<text class="dt-price" >{{userinfo.income}}</text>
							</view>
						</view>
						<view class="cu-item arrow">
							<view class="content">
								<text>总提现</text>
								<text class="dt-price" >{{userinfo.allcash}}</text> 
							</view>
						</view>
					</view>				

						

				</view>
				<view class="flex padding">
					<view class="text-center flex-sub bg-inv padding-sm margin-xs radius" @click="toUrl('/pages/wallet/cash')">提现</view>
					<view class="text-center flex-sub bg-gradual-orange padding-sm margin-xs radius" @click="toUrl('/pages/wallet/recharge')">充值</view>
				</view>
			</view>
		</view>
		<view class="cu-list grid bg-white col-4">
			<view class="cu-item arrow" @click="toUrl('/pages/wallet/rechargelog')">
				<view class="content">
					<text class="text-gray cuIcon-recharge"></text>
					<text>充值明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="toUrl('/pages/wallet/cashlog')">
				<view class="content">
					<text class="text-gray cuIcon-send"></text>
					<text>提现明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="toUrl('/pages/wallet/bill')">
				<view class="content">
					<text class="text-gray cuIcon-list"></text>
					<text>帐单明细</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="toUrl('/pages/wallet/score')">
				<view class="content">
					<text class="text-gray cuIcon-calendar"></text>
					<text>积分明细</text>
				</view>
			</view>
		</view>
		<view class="cu-list grid bg-white col-4">
			<view class="cu-item arrow" @click="toUrl('/pages/bank/index')">
				<view class="content">
					<text class="text-gray cuIcon-vipcard"></text>
					<text>银行卡管理</text>
				</view>
			</view>
<!-- 			<view class="cu-item arrow" @click="toUrl('/pages/user/coupon')">
				<view class="content">
					<text class="text-gray cuIcon-card"></text>
					<text>我的卡券</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="toUrl('/pages/wallet/transfer')">
				<view class="content">
					<text class="text-gray cuIcon-refund"></text>
					<text>会员转账</text>
				</view>
			</view>
			<view class="cu-item arrow" @click="toUrl('/pages/yuebao/index')">
				<view class="content">
					<text class="text-gray cuIcon-rechargefill"></text>
					<text>余额宝</text>
				</view>
			</view> -->
		</view>		
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo:[],
				chartData: {},
			}
		},
		onNavigationBarButtonTap(val) {
			uni.navigateTo({
				url: '/pages/help/detail?id=4',
			});	
		},		
		onLoad: function (option) {
			this.helper.checkLogin();
			this.getData();
		},
		onReady() {
		  },
		methods: {
			navToUrl: function(url) {
			    uni.navigateTo({
			        url: url
			    })
			},

			getData:function(){
				//获取基础参数
				// uni.showLoading({
				// 	title:"数据加载中",
				// 	mask:true
				// })
				var info = uni.getStorageSync("userinfo");
				let timestamp = this.helper.now();
				let sign = this.helper.setSign(['username='+info.username,'token='+info.token,'timestamp='+timestamp]);
				this.helper.req({
					api:"getUserInfo",
					timestamp:timestamp,
					data:{username:info.username,token:info.token},
					header:{sign:sign},
					method:'GET',
				}).then(res=>{
					this.userinfo = res.data.data.userinfo;
					
					setTimeout(() => {
						uni.hideLoading();
					}, 300);
				})
			},
			//链接
			toUrl:function(e){
				uni.navigateTo({
					url: e,
				});	
			},
		}
	}
</script>

<style lang="scss">
page {
    background-color: #fff;
}
	.vip-card-box {
		height: 400upx;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		padding: 0 20upx 24upx;
		margin: 0 20upx 0;
		line-height: 50upx;
		z-index: 10
	}
	input.text-xxlx{
		font-size: 50upx;
	}
	.screen-swiper{
		min-height: 300upx;
	}
.dl-container {
  display: flex;
  margin-top: 80rpx; /* 调整顶部间距 */
}

.dt-item {
  display: flex;
  flex-direction: column;
  flex: 1;
  text-align: center;
  align-items: center; /* 居中对齐 */
}

.dt-title {
  font-size: 24rpx;
  font-weight: bold;
  color: #FFFFFF;
  line-height: 38rpx;
}

.dt-num {
  font-size: 60rpx;
  font-weight: 400;
  color: #FFFFFF;
  line-height: 38rpx;
  margin-top: 10rpx; /* 调整h6与h5之间的间距 */
}
.dt-price{
	color: #fe8f27;
	font-size: 32rpx;
}
</style>
